
<template>
   <div class="from-box" >
    <div class="form-top" >
      <div class="form-top-title" >数据大屏信息展示</div>
      <div class="form-top-time">{{ formattedDateTime }}</div>
    </div>

    <div class="from-dis">
      <div style="width: 480px;">
        <DialChart />
        <DataSorting />
      </div>
      <div style="width: 860px; margin: 0 30px;">
        <Map />
        <LineChart />
      </div>
      <div style="width: 480px;">
        <PieChart />
        <RadarChart />
        <LineHist />
      </div>
    </div>

   </div>
</template>

<script setup>
import { onMounted,ref,onUnmounted  } from 'vue'

import DialChart from '@/components/DialChart.vue'
import DataSorting from '@/components/DataSorting.vue'
import Map from '@/components/MapVi.vue'
import LineChart from '@/components/LineChart.vue'
import PieChart from '@/components/PieChart.vue'
import LineHist from '@/components/LineHistogram.vue'
import RadarChart from '@/components/RadarChart.vue'
import axios from "axios";

const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

const formattedDateTime = ref('');
onMounted(() => {

  setInterval(() => {
    formattedDateTime.value = formatDate(new Date());
  }, 1000);
});



</script>

<style scoped>

.from-box{
  height: 100%;
    margin: 0px;
    padding: 0;
    position: relative;
    background: url('@/assets/bg.png');
    background-size:100% 100%;
    background-attachment:fixed;
    
}
.from-dis{
  display: flex;
  padding:  0 20px
}
.form-top{
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding:  0 20px;
  height: 60px;
  line-height: 60px;
  padding-top: 10px;
}
.form-top-title{
  font-size: 36px;
  color: #fff;
  
  text-shadow: 0px 2px 2px rgba(13,51,117,0.67);
  background: linear-gradient(0deg, #73CFFB 0%, #FFFFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: auto;

}
.form-top-time{
  color: #fff;
  position: absolute;
    right: 24px
}
</style>
